<template>
  <div>
    <myheader></myheader>
    <div class="img">
      <div class="img-item">
        <img src="@/assets/1.png" alt="" />
      </div>
      <div>
        <ul>
          <li v-for="item in state.list" :key="item._id">
            <h3 @click="onedetail(item._id)">{{ item.title }}</h3>
            <div class="dsic">
              <img :src="item.image.url" alt="" />
              <div>{{ item.excerpt }}</div>
            </div>
            <p>{{ item.createdAt }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import myheader from '@/components/MyHeader';
import {onceList} from "@/utils/api";
import { useRoute ,useRouter } from "vue-router";
import { ref, reactive } from "vue";
let { query } = useRoute();
let {push}  =useRouter()

const state = reactive({
  onelist: {
    id: query.id,
    pageSize: 5,
    currentPage: 1,
  },
  info: {},
  list: [],
});

onceList(state.onelist).then((res) => {
  state.info = res.data;
  state.list = res.data.list;
  console.log(state.info);
});
const onedetail =(id:string)=>{
   push({
    path:'/propsList',
    query:{id}
   })
    
}
</script>
<style lang="scss" scoped>
.img {
  margin: 10px auto;
  width: 800px;
  height: 150px;
  border-bottom: 1px solid #000;
  //   text-align: center;
  .img-item {
    width: 200px;
    height: auto;
    margin: 10px auto;
    img {
      width: 150px;
      height: 150px;
    }
  }
}
ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    box-sizing: border-box;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 15px #ccc;
    .dsic{
        display: flex;
        img{
            width: 150px;
            height: 100px;
            margin: 0 10px;
        }
    }
  }
}
</style>